import React, { Component } from "react";
import "./OrderDetail.scss";
import { withRouter } from "react-router-dom";
import { NavBar, Icon } from "antd-mobile";
import { getOrderDetailData } from "../../data/lbqapi";
import { imgURL as baseImg } from "../../baseURL/baseURL";
import { Toast } from "antd-mobile";

class OrderDetail extends Component {
  // this.props.history.push("orderDetail?doerSn=" + params);
  state = {
    orderDetailData: {},
  };
  handleBack = (params) => {
    this.props.history.go(-1);
  };
  handlegoodDetail = (goods_id) => {
    this.props.history.push("goodsDetail?" + goods_id);
  };
  contact = (params) => {
    Toast.info("敬请期待！");
  };
  handleQuickPay = (orderNumber, orderPrice) => {
    this.props.history.push("payment?orderSn=" + orderNumber + "&totalPrice=" + orderPrice);
  };
  async componentDidMount() {
    let urlOrderNumber = this.props.location.search.split("=")[1];
    let res = await getOrderDetailData(urlOrderNumber);
    console.log(res.data);
    this.setState({
      orderDetailData: res.data,
    });
  }
  render() {
    return (
      <div className="appOrderDetail">
        <div className="orderDetailNavBar">
          <NavBar mode="light" icon={<Icon type="left" />} onLeftClick={this.handleBack}>
            订单详情
          </NavBar>
        </div>
        <div className="orderDetailPay">
          <div className="payTop">
            <div className="payTopLeft">
              <span>
                {this.state.orderDetailData &&
                  this.state.orderDetailData.address &&
                  this.state.orderDetailData.address.name}
              </span>
              {this.state.orderDetailData &&
                this.state.orderDetailData.address &&
                this.state.orderDetailData.address.tel}
            </div>
            <div className="payTopRight">
              {this.state.orderDetailData &&
              this.state.orderDetailData.statusName === "待付款"
                ? "未付款"
                : "已取消"}
            </div>
          </div>
          <div className="payMiddle">
            {this.state.orderDetailData &&
              this.state.orderDetailData.address &&
              this.state.orderDetailData.address.wholeAddressInfo}
          </div>
          <div className="payBottom">
            <div className="payBottomContact" onClick={this.contact}>
              联系客服
            </div>
            <div
              className="payBottomQuickPay"
              onClick={this.handleQuickPay.bind(
                this,
                this.state.orderDetailData && this.state.orderDetailData.orderSn,
                this.state.orderDetailData && this.state.orderDetailData.totalPrice
              )}
            >
              立即付款
            </div>
          </div>
        </div>
        <div className="orderDetailMessage">
          <div className="messageTop">
            订单编号：
            {this.state.orderDetailData && this.state.orderDetailData.orderSn}
          </div>
          <div
            className="messageMiddle"
            onClick={this.handlegoodDetail.bind(
              this,
              this.state.orderDetailData &&
                this.state.orderDetailData.items &&
                this.state.orderDetailData.items[0].goods.id
            )}
          >
            <div className="messageMiddleLeft">
              <img
                src={
                  this.state.orderDetailData &&
                  this.state.orderDetailData.items &&
                  this.state.orderDetailData.items[0].goods.pic
                    ? baseImg + this.state.orderDetailData.items[0].goods.pic
                    : ""
                }
                alt=""
              />
            </div>
            <div className="messageMiddleRight">
              <div className="messageMiddleRightIntroduce">
                <div className="messageMiddleRightIntroduceName">
                  {this.state.orderDetailData &&
                    this.state.orderDetailData.items &&
                    this.state.orderDetailData.items[0].goods.name}
                </div>
                <div className="messageMiddleRightIntroduceDescript">
                  {this.state.orderDetailData &&
                    this.state.orderDetailData.items &&
                    this.state.orderDetailData.items[0].goods.descript}
                </div>
              </div>
              <div className="messageMiddleRightNumber">
                <div className="messageMiddleRightNumberPrice">
                  ￥
                  <span>
                    {this.state.orderDetailData &&
                      this.state.orderDetailData.items &&
                      this.state.orderDetailData.items[0].goods.price / 100}
                  </span>
                  .00
                </div>
                <div className="messageMiddleRightNumberStock">
                  x
                  {this.state.orderDetailData &&
                    this.state.orderDetailData.items &&
                    this.state.orderDetailData.items[0].goods.stock}
                </div>
              </div>
            </div>
          </div>
          <div className="messageBottom">
            合计：
            {this.state.orderDetailData && this.state.orderDetailData.totalPrice / 100}
            .00
          </div>
        </div>
        <div className="orderDetailOther">
          <div className="otherOne">订单信息</div>
          <div className="otherTwo">
            <div className="otherTwoLeft">订单编号</div>
            <div className="otherTwoRight">
              {this.state.orderDetailData && this.state.orderDetailData.orderSn}
            </div>
          </div>
          <div className="otherThree">备注</div>
          <div className="otherFour">
            <div className="otherFourLeft">创建时间</div>
            <div className="otherFourRight">
              {this.state.orderDetailData && this.state.orderDetailData.createTime}
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default withRouter(OrderDetail);
